<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:74:"D:\phpStudy\WWW\ferr\public/../application/wechat\view\cons\businlist.html";i:1493812959;}*/ ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>订单列表</title>
    <link rel="stylesheet" href="__CSS__/bootstrap.min.css">
    <link rel="stylesheet" href="__CSS__/hdw.css">
    <link rel="stylesheet" href="__CSS__/reset.css">
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="stylesheet" href="__CSS__/wechat/cons.css">
    <link rel="stylesheet" type="text/css" href="__CSS__/mobiscroll.custom-2.5.2.min.css">
    <link rel="stylesheet" href="__CSS__/dropload.css">
    <script src="__JS__/vue.js"></script>
    <script src="__JS__/libs/jquery-2.0.2.min.js"></script>
    <script src="__JS__/bootstrap/bootstrap.min.js"></script>
    <script src="__JS__/hdw.js"></script>
    <script type="text/javascript" src="__JS__/mobiscroll.custom-2.5.2.min.js""></script>
    <script src="__JS__/plugin/dropload.js"></script>
    <style>
    *{
    		padding: 0;
    		margin: 0; 
    	}
    	.navBox ul{
    		overflow:auto;    		
    	}	
    	.navBox ul li{
    		float:left;
    		width:25%;
    		height:40px;
    		line-height:40px;
    		list-style: none;
    		text-align: center;
    	}
    	.active{    		
    		color:#00BBD3;
    	}
    	#border{
    		height:3px;
			width: 25%;
			background: #00BBD3;
			display: block;
    	}
		.active_border0{
			margin-left: 0%;
			
		}
		.active_border1{
			margin-left: 25%;
		}
		.active_border2{
			margin-left: 50%;
		}
		.active_border3{
			margin-left: 75%;
		}
		
		.lists a{
			font-size: 12px;
		    display: block;
		    overflow: auto;
		}
		.lists a img,.lists a h3,.lists a span{
			float: left;
		}
		.lists a h3{
			width: 58%;
		}
		
		
		.conts{
        	display: flex;
        	height: 28px;
    		line-height: 28px;
        }
        #contentBox .item{
        	display: block;
        	color: #595959;
        	padding: 0 20px;
        	border-bottom: 1px solid #dedede;
        	background: #fff;
        }
       
		/*.cont1 div,.cont2 div{
			display: inline-block;
		}*/
		.conts1 .name,.conts2 .state{
			/*width: 40vw;*/
			 -webkit-box-flex: 2;
		    -ms-flex: 2;
		    flex: 2;		
		}
		.conts1 .business,.conts2 .stime{
			/*width: 60vw;*/
			 -webkit-box-flex: 3;
		    -ms-flex: 3;
		    flex: 3;		 
		}
		
		.state span{
			display: inline-block;
			height: 24px;
    		line-height: 24px;
    		width: 56px;
    		text-align: center;
    		padding: 0 5px;
    		border-radius: 9px;
    		
		}
		
		.state-1{
			color: orange
		}
		.state-1 span{
			border: 1px solid orange;
		}
		.state0{
			color: red;
		}
		.state0 span{
			border: 1px solid red;
		}
		.state1{
			color: green;
		}
		.state1 span{
			border: 1px solid green;
		}
		
		.navBox{
			position: relative;
		}
		.shadow{
			height: 46px;
		    width: 100%;
		    position: absolute;
		    top: 0;
		    left: 0;
		    background: rgba(0,0,0,0.3);
		    display: none;
		}
		.content [class*="lists"]{
			display: none;
		}
    </style>
</head>
<body>
<div id="contentBox">
    <nav class="navBox">
    	<div class="shadow"></div>
        <ul>        	
			<li tid="0" class="active ">全部</li>
			<li tid="1" >待审核</li>
			<li tid="2" >已通过</li>
			<li tid="3" >未通过</li>
        </ul>
        <span id="border" class="active_border0 "></span>
    </nav>
    <div class="main">
        <div class="content">
        	<div class="lists0 lists"></div>	   
			<div class="lists1 lists"></div>
			<div class="lists2 lists"></div>
			<div class="lists3 lists"></div>
        </div>
    </div>
</div>
<script>
 	//时间戳
	function timetrans(date,type){
	    var date = new Date(date*1000);//如果date为10位不需要乘1000
	    var Y = date.getFullYear();
	    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
	    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
	    var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
	    var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes());
	    var s = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());		    
	    if(type==1){
	    	return Y+"/"+M+"/"+D+" "+h+":"+m+":"+s;
	    }else if(type==2){
	    	return Y+"/"+M+"/"+D;
	    }	else if(type==3){
          return Y+"/"+M+" "+h+":"+m;
        }	    
	}
	function load(page,state,el){  //上拉下拉刷新，并刚开始会自动加载  	
//		  $("ul").off("click","li");//*****还没有加载，事先解除click绑定
		  $("ul li").removeClass("load");
//		  $(".shadow").show();
    	  $('.content').dropload({
		        scrollArea : window,
		        loadDownFn : function(me){
		            page++;
		            // 拼接HTML
		            var result = '';
		            $.ajax({
		                type: 'post',
		                url: '/index.php/manage/Affairbase/myOrderList',
		                data:{page:page,state:state},
		                dataType: 'json',
//		                async: false ,
		                success: function(res){		                
//		                    var res = JSON.parse(res);
        					if(res.status==1){
        						data = res.data;
        						var arrLen = data.length;
        						console.log(arrLen);
        						var state;
	        					if(arrLen > 0){
//	        						var result = '';
			                        for(var i=0; i<arrLen; i++){
										if(data[i].state==-1){//待审核			      					
				      						data[i].state="待审核";
				      						state="state-1";
				      					}else if(data[i].state==0){//未通过
				      						data[i].state="未通过";
				      						state="state0"
				      					}else if(data[i].state==1){//通过
				      						data[i].state="通过";
				      						state="state1"
				      					}
				      					data[i].time=timetrans(data[i].time,"1");
										 result +=`
										 	<a href="${data[i].url}" class="item" style="margin-bottom: 0;">
								                <div class="conts1 conts">
								                    <div class="name">${data[i].typeName}</div>
								                    <div class="business">${data[i].title}</div>
								                </div>
								                <div class="conts2 conts">	
								                	<div class="state ${state}" >
								                    	<span>${data[i].state}</span>
								                    </div>
								                    <div class="stime">                    
								                        <span>
								                           	<b>${data[i].time}</b>
								                        </span>
								                    </div>
								                </div>               
								            </a>
										 `;
										 
			                        }
											                      
			                    // 如果没有数据
			                    }else if(arrLen==0){
			                        // 锁定		
			                        me.lock();
			                        // 无数据
			                        me.noData();
			                    }			                

	                        	// *****插入数据到页面，放到最后面，加载完成插入数据后继续绑定click事件	                           
	                           	$(el).append(result);
//	                            setTimeout(function(){
	                            	$("ul li").addClass("load");
//	                            },4000)
								
//	                        	$(".shadow").hide(4000);
	                        
	                            // 每次数据插入，必须重置
	                            me.resetload();
//			                  
        					}   

		                },
		                error: function(xhr, type){
//		                    alert('Ajax error!');
//		                    // 即使加载出错，也得重置
//		                    me.resetload();
		                }
		            });
		        }
		    });
    }
	
	$(function(){
//		$("ul").off("click","li");
		$(".content").find(".lists a").remove();//每次切换列表都要先清空列表
		$(".dropload-down").remove();	
		// 页数
		    var page = 0;
		    // 每页展示5个
		    var size = 5;
			var data;
			var state=2;
		    // dropload
		    $(".lists0").show();
		  	load(page,state,".lists0");		  	
//		  	load(page,state,".lists1");
//		  	load(page,state,".lists2");
//		  	load(page,state,".lists3");
	})
	
	$("ul").on("click",".load",function(){
		
		$(".content").find(".lists a").remove();//每次切换列表都要先清空列表
		$(".dropload-down").remove();
//		$(".dropload-down").remove();		
		$(this).addClass("active").siblings(".active").removeClass("active");
//		$(this).addClass("load").siblings(".load").removeClass("load");//解除class的load，让其他不能点击
//		$("ul li").removeClass("load");
		  
		var tid=$(this).attr("tid");
		$("#border").attr("class","active_border"+tid);	
		
		$(".lists"+tid).show().siblings().hide();
		if(tid==0){			//全部
			 // 页数		
		    var page = 0;
			var data;
			var state=2;
		    // dropload
		  	load(page,state,".lists0");	
		}else if(tid==1){		 //待审核		
			var page = 0;
			var data;
			var state=-1;
		    // dropload
		  load(page,state,".lists1");	
		}else if(tid==2){       //已通过
	
			var page = 0;
			var data;
			var state=1;			
		    // dropload
		  	load(page,state,".lists2");	
		}else if(tid==3){	        //未通过		
			var page = 0;
			var data;
			var state=0;
		    // dropload
		  	load(page,state,".lists3");	
		}
		
	})
    
</script>

</body>
</html>